<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 父组件传参 -->
        <my-search :parent-value.sync="money"></my-search>
    </div>

    <script src="js/vue.js"></script>

    <script>
        let myApp = new Vue({
            el:'#app',
            components:{
                // 注册组件
                // 1.组件名称注册时用驼峰注册，使用组件时使用-链接
                // 2.如果存在多个html标签平级，需要一个跟标签，最顶级的节点，只有一个
                // 3.组件中如果需要声明变量，那么data必须是函数，return出变量对象奥、
                // 3-解析 变量渲染
                // 4.组件中声明方法，不要使用函数箭头函数，它不hi指向全局的作用域，它会指向window

                // 子组件获取父组件的参数 this.$parent,attr

                //双向绑定 ---- 单向数据流

                // 第一步，父组件参数用的时候加上.sync修饰符
                // 第二部，使用this.$emit('update:attr')
                //封装性，独立性，
                // 父子组件----数据交互
                mySearch:{
                    //子组件接收
                    props:{
                        parentValue:{
                            //接收参数的类型
                            type:String,
                            //props传参的默认值
                            default:'300'
                        }
                    },
                    //在子组件中，我想使用父组件的数据
                    //接收父组件传过来的数据
                    template:`
                        <div class="box">
                            <div>
                                <input v-model="userName" type="text">
                                {{userName}}
                                <button @click="search">搜索</button>
                            </div>
                            <div>{{childMsg}}</div>
                            <h1>继承遗产{{parentValue}}</h1>
                        </div>
                    `,
                    data:function(){
                        return {
                            userName:'',
                            childMsg:'这是组件中的变量'
                        }
                    },
                    methods:{
                        search(){
                            // console.log(this)
                            // console.log(this.userName)
                            // 代码可读性变差
                            // 不推荐
                            // console.log(this.$parent.money)
                            // this.parentValue = '100'
                            //强烈建议不适用
                            this.$emit('update:parentValue','100')
                        },
                    }
                }
            },
            data:{
                money:'1000000000'
            },
            methods:{}
        })
    </script>
</body>
</html>